import React, { useState, useEffect, useRef } from 'react'
import HeaderNav from "./components/header-nav"
import FooterNav from "@/components/footer-nav"
import Search from './components/Search'
import { SearchBar, PullToRefresh, InfiniteScroll, DotLoading } from 'antd-mobile'
import ItemCrad from "./components/itemCrad"
import styles from "./index.module.less"
import { showErrorToast } from '@/utils/customToast';

const { getUserWorldBookList } = $globalServicer('world')
const Classify = () => {

  const PageSize = 10; // 每页加载的数据条数
  const [page, setPage] = useState(1); // 当前页码
  const [keyWords, setKeyWords] = useState(''); // 搜索关键字
  const [listData, setListData] = useState([]); // 列表数据
  const [hasMore, setHasMore] = useState(false); // 是否有更多数据
  const [refreshing, setRefreshing] = useState(false); // 刷新状态
  const [loading, setLoading] = useState(false); // 加载状态
  const customNavigate = $globalNavigate()
  const fetchData = async () => {
    try {
      const response = await getUserWorldBookList({
        page,
        size: PageSize,
        key: keyWords
      });
      return response.data; // 假设返回的 data 是列表数据
    } catch (error) {
      showErrorToast('加载失败，请稍后再试')
      return [];
    }
  };
  const InfiniteScrollContent = ({ hasMore }) => {
    return (
      <>
        {hasMore ? (
            <div className={styles.loadingContainer}>
                <div className={styles.loadingContent}>
                    <DotLoading color="primary"/>
                    <div className={styles.loadingText}>正在加载，请稍等...</div>
                </div>
            </div>
        ) : (
            <span>--- 已到达底部 ---</span>
        )}
      </>
    )
  }
    // 加载更多数据的逻辑
    const loadMoreData = async () => {
        if (!hasMore || loading) return;
        setLoading(true); // 设置加载状态为 true
        const newData = await fetchData();
    console.log("🚀 ~ loadMoreData ~ newData:", newData)
    if (newData.length < PageSize) {
      setHasMore(false); // 如果返回数据少于 pageSize，则表示没有更多数据
    }

    setListData((prevData) => [...prevData, ...newData]); // 累加新数据
    setPage((prevPage) => prevPage + 1); // 更新页码
    setLoading(false); // 结束加载状态
  };

  // 首次加载数据
  useEffect(() => {
    setHasMore(true); // 重置更多数据标志
    setPage(1); // 重置页码
    setListData([]); // 清空当前列表
    loadMoreData(); // 加载新分类的数据
  }, []);
  // 下拉刷新逻辑
  const handleRefresh = async () => {
    setRefreshing(true);
    // const refreshedData = await fetchData(1, PageSize); // 重新加载第一页的数据
    setListData([]);
    setPage(1); // 重置页码
    setHasMore(true); // 恢复更多数据的标志
    setRefreshing(false);
  };
  const handleSearchList = (value) => {
    setKeyWords(value)
  }
  useEffect(() => {
    handleRefresh()
  }, [keyWords])
  return (
    <div className={`${styles.mainContainer} dark-theme`}>
      <div className={styles.header}>
        <h1>智能体库</h1>
      </div>
      
      <div className={styles.searchWrapper}>
        <SearchBar
          placeholder='搜索智能体'
          style={{
            '--border-radius': '100px',
            '--background': '#2c2c2c',
            '--background-color': '#2c2c2c',
            '--height': '50px',
            '--padding-left': '12px',
            '--color': '#ffffff',
            '--placeholder-color': '#9e9e9e',
            '--font-size': '14px',
            '--cancel-color': '#ffffff',
            '--adm-color-background': '#2c2c2c',
            '--adm-color-primary': '#2c2c2c',
            width: '100%',
          }}
          className={styles.searchBar}

          onSearch={(value) => handleSearchList(value)}
          onClear={() => handleSearchList('')}
        />
      </div>
      
      <div className={styles.contentWrapper}>
        <PullToRefresh
          onRefresh={handleRefresh}
          refreshing={refreshing}
        >
          <div className={styles.cardList}>
            {listData.map((item, index) => (
              <ItemCrad  {...item} key={`item_${index}`} handleRefresh={handleRefresh} />
            ))}
            <InfiniteScroll loadMore={loadMoreData} hasMore={hasMore} threshold={20} >
              <InfiniteScrollContent hasMore={hasMore} />
            </InfiniteScroll>
          </div>
        </PullToRefresh>
      </div>
      
      <div className="footer">
        <FooterNav></FooterNav>
      </div>
    </div>
  );
};

export default Classify;
